

Berta.EditorManager.addPlugin('Color', new Class(function() {
	
	return {
		extend: Berta.Editor,
		pluginName: 'Textline',
		
		// defaults for this particular plugin
		defaults: {
			pluginOptions: {
				options: null			// array of predefined color options
				
				// see defaults.pluginOptions in Berta.Editor class for inherited options
			}
		},
		
		valueFromOption: null,
		
		constructor: function(options) {
			// call the parent with pluginName=null
			// Editor defaults get extended by this.defaults and then extended by options
			Berta.Editor.call(this, options);
			
			this.originalValue = this.element.html();	// the current color value
			this.value = this.originalValue;
			
		},
		
		
		//   .______    __    __  .______    __       __    ______    ////////////////////////////////////////////////////////////
		//   |   _  \  |  |  |  | |   _  \  |  |     |  |  /      |   ////////////////////////////////////////////////////////////
		//   |  |_)  | |  |  |  | |  |_)  | |  |     |  | |  ,----'   ////////////////////////////////////////////////////////////
		//   |   ___/  |  |  |  | |   _  <  |  |     |  | |  |        ////////////////////////////////////////////////////////////
		//   |  |      |  `--'  | |  |_)  | |  `----.|  | |  `----.   ////////////////////////////////////////////////////////////
		//   | _|       \______/  |______/  |_______||__|  \______|   ////////////////////////////////////////////////////////////
		
		on: /* API */ function() {
			this.element.addClass('x-editable-on x-editable-color');
			this._(createEditor)();
			Berta.Editor.prototype.on.call(this);
		},
		
		off: /* API */ function() {
			if(this.hasFlag(Berta.Editor.flags.EDITING)) {
				this.cancel();
			}
			
			this._(destroyEditor)();
			this.element.removeClass('x-editable-on x-editable-color');
			Berta.Editor.prototype.off.call(this);
		},
		
		edit: /* API */ function() {
			if(this.hasFlag(Berta.Editor.flags.ON) 
				&& !this.hasFlag(Berta.Editor.flags.EDITING) 
				&& !this.hasFlag(Berta.Editor.flags.SAVING)) {
				
				Berta.Editor.prototype.startEditing.call(this);
				
				if (this.valueFromOption !== null) {
					this.save();
				}
				
				// this type cannot have context variables
				//Berta.Editor.prototype.setPanelContext.call(this);
			}
		},
		
		save: /* API */ function() {
			if(this.hasFlag(Berta.Editor.flags.EDITING)) {
				//this._(hidePopUp)();
				
				if(this.valueFromOption) {
					this.value = this.valueFromOption;
					this.valueFromOption = null;
				}
				
				this._(selectOption)(this.value);
				if(this.value != this.originalValue) this.fireChange();
				
				Berta.Editor.prototype.stopEditing.call(this);
				Berta.Editor.prototype.save.call(this, this._(onSaveComplete));
			}
		},
		
		cancel: /* API */ function() {
			//Berta.Editor.prototype.hidePanelContext.call(this);
			if(this.hasFlag(Berta.Editor.flags.EDITING)) {
				this.element.children('.x-editable-color-custom').ColorPickerHide();
				Berta.Editor.prototype.stopEditing.call(this);
			}
			
			if(this.hasFlag(Berta.Editor.flags.SAVING)) {
				this.saveStop();
			}
			
			this.value = this.originalValue;
			this._(selectOption)(this.value);
			this.fireRevert();
			this.cleanup();
		},

		
		cleanup: function() {
			if(this.hasFlag(Berta.Editor.flags.DESTROYING)) {
				this.off();
			}
		},
		
		
		validate: /* override */ function() {
			Berta.Editor.prototype.validate.call(this);
		}

		
	};
	
	
	
	
	//   .______   .______     __  ____    ____  ___   .___________. _______    //////////////////////////////////////////////////
	//   |   _  \  |   _  \   |  | \   \  /   / /   \  |           ||   ____|   //////////////////////////////////////////////////
	//   |  |_)  | |  |_)  |  |  |  \   \/   / /  ^  \ `---|  |----`|  |__      //////////////////////////////////////////////////
	//   |   ___/  |      /   |  |   \      / /  /_\  \    |  |     |   __|     //////////////////////////////////////////////////
	//   |  |      |  |\  \--.|  |    \    / /  _____  \   |  |     |  |____    //////////////////////////////////////////////////
	//   | _|      | _| `.___||__|     \__/ /__/     \__\  |__|     |_______|   //////////////////////////////////////////////////
	
	
	function createEditor() {
		var html = $('<div></div>');
		var o = this.options.pluginOptions.options, valueInOptions = false, c;
		if(o && o.length > 0) {
			var valueInOptions = false;
			for(var i = 0; i < o.length; i++) {
				$('<span class="x-editable-color-option ' +
					(o[i] == this.value ? 'x-editable-color-selected' : '') + 
					'" style="background-color:' + o[i] + ';" title="' + o[i] + '"></span>')
						.click(this._(onOptionClick))
						.appendTo(html);
				
				valueInOptions |= o[i] == this.value;
			}
		}
			
		$('<span class="x-editable-color-custom ' + 
			(!valueInOptions ? 'x-editable-color-selected' : '') + 
			'"><em></em><span style="background-color:' + this.value + ';"></span></span>')
				.click(this._(onCustomClick))
				.appendTo(html);
				
		this.replacementElement = html;	
		this.element.empty().append(html);
	}
	function destroyEditor() {
		this.replacementElement.remove().end()
					.append(this.value);
		this.replacementElement = null;
	}
	
	function selectOption(value) {
		this.replacementElement.children('span').removeClass('x-editable-color-selected');
		var opt = this.replacementElement.children('span[title="' + value + '"]');
		if (opt.length > 0) 
			opt.addClass('x-editable-color-selected');
		else {
			this.replacementElement.children('.x-editable-color-custom')
						.addClass('x-editable-color-selected')
						.children('span').css('background-color', value);
		}
	}
	
	
	
	
	// callbacks ...
	
	function onOptionClick(event) {
		this.valueFromOption = $(event.target).attr('title');
		this.edit();
		return false;
	}
	
	function onCustomClick(event) {
		this.edit();
		
		var cEl = this.replacementElement.children('.x-editable-color-custom');
		var c = rgbToHex(cEl.children('span').css('background-color'));
 
		cEl.ColorPicker({
			color: c,
			//onBeforeShow: onColorPickerStart,
			onHide: this._(onColorPickerHide),
			onChange: this._(onColorPickerChange),
			onSubmit: this._(onColorPickerSubmit)
		});
		cEl.ColorPickerShow();
		cEl.ColorPickerSetColor(c);
		
		return false;
	}
	
	function onColorPickerHide() {
		this.cancel();
	}
	
	function onColorPickerChange(hsb, hex, rgb) {
		this.value = '#' + hex;
		this.fireChange();
	}
	
	function onColorPickerSubmit(hsb, hex, rgb, el) {
		//$.log(hsb, hex, rgb, el);
		$(el).ColorPickerHide();
		this.value = '#' + hex;
		this.save();
	}
	
	function onSaveComplete(response) {
		if (response.error) {
			//this.askIfCancelOnSaveErorr(response.errorMessage, this._(this.cancel), this._(this.edit));
			alert(response.errorMessage);
			this.cancel();
			
		} else {
			this.value = response.json.values[this.restVarName];
			this._(selectOption)(this.value);
			
			this.fireSave();
			
			// update original value after calling the callback, so the callback can distinguish between the two
			this.originalValue = this.value;
			
			this.cleanup();
		}
	}
	
	
	function rgbToHex(rgb) { 
		var rgbvals = /rgb\((.+),(.+),(.+)\)/i.exec(rgb); 
		var rval = parseInt(rgbvals[1]); 
		var gval = parseInt(rgbvals[2]); 
		var bval = parseInt(rgbvals[3]); 
		return '#' + ( 
						rval.toString(16) + 
						gval.toString(16) + 
						bval.toString(16) 
					).toUpperCase(); 
	} 
	
	
	
	
	
	
	
	

	

}()));



